<template>
	<view class="observe-content">
		<view
			style="position: fixed; left: 0;top: -200px;z-index: 1; width: 100%; height: 500px; background-color: #9CED9C;">
		</view>
		<view style="background-color: #9CED9C;">
			<rf-navbar @click="goback" :title="'  '" src="../../static/images/observe/topIdx.png"></rf-navbar>
			<view class="w100 header">
				<view class="inline date ">
					<image class="header-bg" src="../../static/images/observe/bottomIdx.png" mode="widthFix"></image>
					<view class="dateContent">
						<view class="">
							<view class="bold f36">{{ week }}</view>
							<view class="f32 mt10">{{ dateStr }}</view>
						</view>

					</view>

				</view>
			</view>
		</view>
		<!-- 观察内容 -->
		<view class="observe-body">
			<u-sticky :offset-top="navbarHeight">
				<view class="date">
					<view class="now-date fl">
						<span class="f44 bold">{{ nowDay }}</span>
						<span class="f32 bold ml10">{{ nowMonth }}月</span>
					</view>
					<view class="select-date fr">
						<div class="f32 bold">{{ nowYear }}</div>
					</view>
					<view class="clear"></view>
				</view>
			</u-sticky>
			<view class="" v-if="tableList.length > 0">

				<view v-for="(item, idx) in tableList" class="table-list" :key="idx">
					<view class="avatarMul" v-if="item.isMultiple === 1" @click="openShowAll(item.list)">
						<image class="avatarImg" :src="val.headSculpture" mode="aspectFill"
							v-for="(val, index) in item.list" :key="index" />
					</view>
					<view class="avatar inline" v-else>
						<image class="img" :src="item.list[0].headSculpture" mode="aspectFill"
							@click="onClickKidInfo(item.list[0])" v-if="item.list[0].headSculpture" />
						<image class="img icon-default-avatar" mode="aspectFill" @click="onClickKidInfo(item.list[0])"
							v-else />
					</view>
					<view class="inline details">
						<view class="listTop">
							<view class="">
								<span class="name f32 bold">{{ item.name==null?"无名":item.name }}</span>
								<span class="all" v-if="item.isMultiple === 1" @click="openShowAll(item.list)">全部</span>
							</view>
						</view>
						<view class="content f28">
							<!-- 观察文字 -->
							<view>{{ item.content }}</view>
							<!-- 观察图片 -->
							<view class="image" v-if="item.imagesList.length <= 1">
								<image :src="imgs.url" mode="aspectFill" v-for="(imgs,imgIdx) in item.imagesList"
									:key="imgIdx" @click="lookImg([item.imagesList,imgIdx])" />
							</view>
							<view class="image" v-else>
								<uni-grid :column="3" :showBorder="false">
									<uni-grid-item v-for="(ele, row) in item.imagesList">
										<view class="" style="padding: 2px;;height: 100%;width: 100%;">
											<image style="width: 100%; height: 100%;" mode="aspectFill" :src="ele.url"
												@click="lookImg([item.imagesList, row])">
											</image>
										</view>
									</uni-grid-item>
								</uni-grid>
							</view>
						</view>
						<view style="margin: 10rpx 0rpx;">
							<span class="f24 time">{{ item.createTime }}</span>
						</view>

						<view class="analyze">
							<u-collapse ref="collapseView" :border="false" @close="handleAnalyzeClose(idx)"
								@open="handleAnalyzeOpen(idx)">
								<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx"
									:value="'超小助正在分析中'" v-if="item.status==2">
								</u-collapse-item>
								<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx" :line="5"
									:value="item.expanded?'收起':'展开'" v-else>
									<view v-if="!item.aiAnalysis">
										<view>
											<text class="u-collapse-content text inline f28">
												还未进行分析…
											</text>
										</view>
									</view>
									<view v-else>
										<view style="display: flex;">
											<span class="order inline"></span>
											<text class="u-collapse-content text inline f28"
												:class="{showAllIN:item.expanded, hidetext:!item.expanded}">

												{{ item.aiAnalysis }}
											</text>
										</view>
									</view>

								</u-collapse-item>
							</u-collapse>
							<image class="analyze-icon icon-star" />
							<image class="analyze-title-bottom icon-star-line" />
						</view>
						<view class="item-content" v-if="item.fileUrl">
							<image class="icon-word" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"
								@click="copyBtn(item)">
							</image>
							<view class="left-content">观察记录文件:</view>
							<view class="right-content" @click="copyBtn(item)">
								<view class="text">{{item.fileUrl}}</view>
								<image class="icon-copy icon">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<u-empty mode="car" :marginTop="50" text="暂无观察记录" icon="/static/images/common/empty.png"></u-empty>
			</view>
		</view>


		<!-- 全部 -->
		<view class="">
			<u-popup :round="10" :show="showAll" mode="center" @close="closeAll">
				<view class="allList">
					<view class="bold allNum">全部({{allList.length}}人)</view>
					<view class="allListItem" v-for="(item, idx) in allList" :key="idx" @click="onClickKidInfo(item)">
						<view class="itemImage">
							<rf-avatar :avatarUrl="item.headSculpture" :gender="item.childSex"></rf-avatar>
						</view>
						<view class="itemText">
							<view class="itemName bold">
								{{ item.childName }}
							</view>
							<view class="itemAge">{{item.childAge}}岁</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 筛选时间 -->
		<u-datetime-picker :show="selectDateShow" v-model="dateDaya" mode="year-month" confirmColor="#58C866"
			@cancel="selectDateShow = false" title="选择发表日期" @confirm="handleDate"></u-datetime-picker>

		<!-- 弹框提示 -->
		<rf-toast :show="showWarn" @click="showWarn = false" :isSus="false" :title="errMsg"></rf-toast>

	</view>
</template>

<script>
	import CryptoJS from 'crypto-js'

	import {
		getShareRelease,
	} from '@/api/observe.js'

	export default {
		data() {
			return {
				navbarHeight: this.navBarHeight,
				screenWidth: this.screenWidth,
				screenHeight: this.screenHeight,

				timer: null, // 定时器 获取ai分析内容
				aiList: [], // ai分析未完成的观察记录 ID

				confirmShow: false, // 删除确认窗口

				dateStr: '',
				week: '',
				nowMonth: '',
				nowDay: '',
				nowYear: '',
				selectDateShow: false,
				assistantShow: false, // ai生成完成提示
				dateDaya: Number(new Date()),
				params: {
					id: ""
				},
				timer2: null, // 定时器，在列表为空的时候，定时去获取观察记录数据。
				tableList: [],
				analyzeBtn: '展开',
				showAll: false,
				allList: [{
						childSex: true,
						headSculpture: "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF",
						name: '七个名字',
						age: '3岁'
					},
					{
						childSex: false,
						headSculpture: "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF",
						name: 'ba个名字',
						age: '3岁'
					}
				],
				total: 0,

				dragging: false, // 是否正在拖拽
				mouseX: 0, // 鼠标在元素内的X坐标
				mouseY: 0, // 鼠标在元素内的Y坐标
				left: 0, // 元素左上角距离父容器左侧的距离
				top: 0, // 元素左上角距离父容器顶部的距离


				showWarn: false,
				errMsg: "",
				loading: false, // 加载中提示

				// 删除
				delId: "",
				delIndex: "",

				keyStr: "s517gDRv+GbuckZ/nSMFew==", //加密密钥
				ivStr: "WdkI30nJkT6cVy3q6fimMw==", //矢量

			};
		},
		// computed: {
		// 	...mapState(['hasLogin', 'userInfo'])
		// },


		onUnload() {

		},
		onLoad(options) {

			this.left = this.screenWidth - 80;
			this.top = this.screenHeight - 180;

			const observeid = options.observeid;
			console.log("-------share---", observeid);
			this.params.id = this.aes_encrypt(observeid);

			console.log("-------share---", this.params.id);

		},
		mounted() {
			// this.initTime();

		},

		onShow() {
			let _that = this;


			_that.getObserveList()
			clearInterval(_that.timer2)
			_that.timer2 = setInterval(() => {
				if (_that.tableList.length > 0) {
					clearInterval(_that.timer2)
				} else {
					_that.getObserveList()
				}
			}, 5000)


		},
		onHide() {
			clearInterval(this.timer2)
			// this.tableList.
			for (var i = 0; i < this.tableList.length; i++) {
				this.tableList[i].expanded = false
				this.$refs.collapseView[i].init()
			}
			// if (this.tableList.length > 0) {
			// 	this.$forceUpdate();
			// 	this.$nextTick(() => {
			// 		this.$refs.collapseView[0].init()
			// 		// this.$refs.collapseItem[0].queryRect()
			// 	})
			// }
		},
		methods: {
			goback() {

				uni.switchTab({
					url: "/pages/observe/observe"
				})
			},
			//加密
			aes_encrypt(word) {

				var key = CryptoJS.enc.Base64.parse(this.keyStr);
				var iv = CryptoJS.enc.Base64.parse(this.ivStr);

				// var srcs = CryptoJS.enc.Utf8.parse(word);
				var encrypted = CryptoJS.AES.encrypt(word, key, {
					iv: iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				return encrypted.toString();
			},
			// 解密
			aes_decrypt(word) {

				// const restoreBase64 = word.replace(/\-/g,'+').replace(/_/g,'/');
				var restoreBase64 = word.replace(/[\r\n]/g, '');

				var decrypt = CryptoJS.AES.decrypt(restoreBase64, this.keyStr, {
					iv: this.ivStr,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				return CryptoJS.enc.Utf8.stringify(decrypt).toString();
			},
			copyBtn(item) {
				let _that = this;
				wx.setClipboardData({
					//复制文本
					data: item.fileUrl,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							mask: 'true' //是否设置点击蒙版，防止点击穿透
						});
					}
				});
			},

			async _login() {
				let _that = this;
				let code = await getcode()
				console.log("==============", code);
				let res = await getOpenid(code)
				console.log("==============", res.data);

				toLogin(res.data, "", "", "").then(res => {
					this.loading = false
					console.log("ppppppp");
					console.log(res);
					this.updateState(res)
					// 方法二
					// this.$store.commit("updateState", {
					// 	hasLogin: true,
					// 	userInfo: res.userInfo,
					// });
				}).catch(err => {
					this.loading = false
					console.log("-==============--------------");
					console.log(err);
					// 如果未注册，提示去注册。

				})


				// await this.login() // 登录
				// this.getObserveList()

				// getTeacherInfo().then(res => {
				// 	console.log("res: " + JSON.stringify(res.data.id));
				// 	if (res.data.id) {
				// 		uni.setStorageSync('userInfo', this.userInfo)
				// 	}
				// })
				console.log("--------------=====..//////", this.hasLogin);
			},
			// 查看孩子档案
			onClickKidInfo(event) {
				console.log("event: " + JSON.stringify(event));
				this.closeAll()

			},


			handle() {
				// 消除ai分析已完成的提示
				this.assistantShow = false
			},
			// 分享
			share() {
				console.log(2222)
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle", // 分享跳转的链接
					title: "微信分享", // 分享标题
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7", //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
						console.log(res)
					},
					fail: function(err) {
						console.log(err)
						// 此处是调起微信分享失败的回调
					},
				})
			},
			getObserveList() {
				let _that = this
				getShareRelease(_that.params).then(res => {
					console.log("_that.tableList", res);
					_that.total = res.data.total
					_that.tableList = []
					_that.tableList.push(res.data)
					_that.nowYear = uni.$u.timeFormat(_that.tableList[0].createTime, 'yyyy')
					_that.nowMonth = uni.$u.timeFormat(_that.tableList[0].createTime, 'mm')
					_that.nowDay = uni.$u.timeFormat(_that.tableList[0].createTime, 'dd')
					console.log(_that.nowYear, _that.nowMonth, _that.nowDay);
					// this.$nextTick(() => {
					// 	this.$refs.collapseView[0].init()
					// 	// this.$refs.collapseItem[0].queryRect()
					// })

				})
			},
			// 
			closeAll() {
				this.showAll = false
			},
			// 
			openShowAll(val) {
				this.allList = val
				this.showAll = true
				console.log(this.showAll)
			},
			lookImg: function(val) {
				const urls = val[0].map(item => {
					return item.url
				})
				const current = val[1]
				console.log(urls);
				console.log(current);

				uni.previewImage({
					urls,
					current
				})
			},
			// 初始化日期
			initTime() {
				const time = new Date();
				//获得系统年份;
				const year = time.getFullYear();
				//获得系统月份;
				const month = time.getMonth() + 1;
				//获得系统当月分天数;
				const day = time.getDate();
				//获得系统星期几;
				let dayCycle = time.getDay();
				//使用数组更改日期样式;
				const dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (let i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				this.dateStr = year + '/' + month + '/' + day + ' ';
				this.week = '星期' + dayCycle;
				this.nowMonth = month;
				this.nowDay = day;
				this.nowYear = year;
			},
			selectDate() {

				this.selectDateShow = true;
			},
			// 日期回调
			handleDate(e) {

				this.params.pageNum = 1
				this.params.year = uni.$u.timeFormat(e.value, 'yyyy')
				this.params.month = uni.$u.timeFormat(e.value, 'mm')
				console.log(this.params)
				this.getObserveList()
				this.selectDateShow = false;
			},
			// 删除观察
			handleDelete(id, idx) {
				let _that = this
				console.log(id, idx);
				this.delId = id;
				this.delIndex = idx;
				this.confirmShow = true

			},
			confirm() {
				console.log(this.delId, this.delIndex);
				let _that = this
				delObserve(this.delId).then(res => {
					console.log(res);
					console.log("res: " + JSON.stringify(res));
					if (res.code == 200) {
						_that.tableList.splice(_that.delIndex, 1)
						_that.confirmShow = false;
					}
				}).catch(err => {
					_that.errMsg = "删除失败"
					_that.showWarn = true
				})
			},
			// 编辑当前观察记录
			handleEditObserve(item) {
				console.log("itemitem: " + JSON.stringify(item));
				uni.navigateTo({
					url: '/pages-sub/observeAdd/addObserve?type=update&item=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},
			// 观察分析关闭事件
			handleAnalyzeClose(index) {
				let _that = this

				clearTimeout(this.timer)
				this.timer = null
				this.timer = setTimeout(() => {
					_that.tableList[index].expanded = false;
					_that.$forceUpdate();
				}, 300);
			},
			// 观赏分析展开事件
			handleAnalyzeOpen(index) {
				this.tableList[index].expanded = true;
				this.$forceUpdate();
			},
			// 新增观察记录
			handleAddObserve() {
				if (!this.hasLogin) {
					this.showRegister = true;
					return
				}
				console.log("----------");
				uni.navigateTo({
					url: '/pages-sub/observeAdd/addObserve'
				});
			},
			handleMouseDown(event) {
				this.dragging = true;
				this.mouseX = event.changedTouches[0].clientX;
				this.mouseY = event.changedTouches[0].clientY;
			},
			handleMouseMove(event) {
				if (this.dragging) {
					console.log("event", event);
					console.log("screenWidth", this.screenWidth);
					console.log("screenHeight", this.screenHeight);
					const deltaX = event.changedTouches[0].clientX - this.mouseX;
					const deltaY = event.changedTouches[0].clientY - this.mouseY;

					var left = this.left + deltaX;
					var top = this.top + deltaY;
					if (left <= 0) {
						this.left = 0
					} else if (left >= (this.screenWidth - 60)) {
						this.left = (this.screenWidth - 60)
					} else {
						this.left = left;
					}
					if (top <= 0) {
						this.top = 0
					} else if (top >= (this.screenHeight - 100)) {
						this.top = (this.screenHeight - 100)
					} else {
						this.top = top;
					}
					this.mouseX = event.changedTouches[0].clientX;
					this.mouseY = event.changedTouches[0].clientY;
				}
			},
			handleMouseUp(event) {
				console.log(event);
				this.dragging = false;
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.observe-content {

		.listTop {
			display: flex;
			justify-content: space-between;

			.all {
				padding: 8rpx 20rpx;
				font-size: 24rpx;
				background-color: #EDEFF5;
				color: #43465C;
				border-radius: 20rpx;
				margin-left: 30rpx;
			}



			.listRight {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.share {
					border: none;
					color: #1CC367;
					padding: 5rpx 0 5rpx 5rpx;
					line-height: 12px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: flex-end;

				}
			}
		}

		// 全部弹窗
		.allList {
			padding-top: 30rpx;
			padding-left: 34rpx;
			width: 480rpx;

			.allNum {
				margin-bottom: 50rpx;
			}

			.allListItem {
				display: flex;
				align-items: center;
				padding-bottom: 40rpx;
			}

			.itemName {
				font-size: 32rpx;
				color: #3A3D4B;
			}

			.itemImage {
				margin-right: 24rpx;
			}

			.itemAge {
				color: #77798D;
			}
		}

		.topFixed {
			position: relative;
			z-index: 999;
			height: 104.12px;
			background-color: #9CED9C;

			.bg-image {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 104.12px;
				z-index: 999;
				background-image: url('../../static/images/observe/topIdx.png');
				background-size: 100%;
			}
		}

		.headerImg {
			width: 100%;
			position: fixed;
			z-index: 99;
		}

		.header {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
			top: 0;
			background-color: #9CED9C;


			.header-bg {
				width: 100%;
				height: 100%;
			}

			.date {}

			.hierarchy-up {
				top: 17px;
				// position: absolute;
				// width: 100%;
				// z-index: 9;
			}

			.dateContent {
				width: 100%;
				position: absolute;
				z-index: inherit;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 80rpx 0 98rpx;
			}


		}

		.observe-body {
			width: 100%;
			min-height: 70vh;
			// padding: 0 32rpx;
			border-radius: 36rpx 36rpx 0 0;
			margin-top: 4rpx;
			position: relative;
			z-index: 3;
			top: -20px;
			background-color: #fff;
			box-sizing: border-box;

			.date {
				padding: 0 32rpx;
				border-radius: 36rpx 36rpx 0 0;
				background-color: #fff;
			}

			.now-date {
				margin-top: 32rpx;
			}

			.select-date {
				margin-top: 32rpx;
				position: relative;
				padding-right: 45rpx;

				&:before {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					right: 0;
					top: 15rpx;
					border-top: 15rpx solid #3A3D4B;
					border-left: 15rpx solid transparent;
					border-right: 15rpx solid transparent;
				}
			}

			.u-picker.data-v-f45a262e {
				padding-bottom: 112rpx;
			}

			.u-picker__view.data-v-f45a262e {
				border-bottom: 2rpx solid #000;
			}

			.u-toolbar__cancel__wrapper {
				position: absolute;
				color: #3A3D4B;
				left: 115rpx;
				bottom: 32rpx;
			}

			.u-toolbar__confirm__wrapper {
				position: absolute;
				right: 115rpx;
				bottom: 32rpx;
			}

			.u-popup__content.data-v-3a231fda {
				border-radius: 24rpx 24rpx 0 0;
				overflow: hidden;
			}

			.table-list {
				margin-top: 40rpx;
				padding: 0 32rpx;
				display: flex;
			}

			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.avatarMul {
				display: flex;
				align-items: center;
				width: 88rpx;
				height: 88rpx;
				border-radius: 10rpx;
				background-color: #EDEFF5;
				flex-wrap: wrap;
				overflow: hidden;

				.avatarImg {
					width: 24rpx;
					height: 24rpx;
					margin: 2rpx;
				}
			}

			.details {
				width: 580rpx;
				margin-left: 20rpx;
			}

			.content {
				margin-top: 20rpx;
			}

			.image {
				margin-top: 20rpx;

				image {
					width: 480rpx;
					height: 280rpx;
					border-radius: 10rpx;
				}
			}

			.year-month {
				color: #99A1AF;
			}

			.time {
				margin-left: 15rpx;
				color: #99A1AF;
			}

			.delete {
				margin-left: 30rpx;
				cursor: pointer;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.edit {
				margin-left: 50rpx;
				cursor: pointer;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.analyze {
				position: relative;
				background-color: #FAF9E5;

				.u-collapse {
					background-color: #FAF9E5;
					border-radius: 8rpx;
				}

				// 标题head
				.u-cell__body {
					height: 80rpx;
					padding: 20rpx !important;
				}

				.u-cell__title-text {
					font-size: 28rpx !important;
					color: #3A3D4B !important;
					font-weight: 600;
					padding-left: 42rpx;
					line-height: 40rpx !important;
				}

				.u-cell__value.data-v-1c4434ae {
					font-size: 26rpx;
					color: #000;
				}

				// 展开箭头
				.u-icon__icon--info.data-v-2ee87dc9 {
					color: #000000 !important;
					font-weight: bold !important;
					font-size: 30rpx !important;
				}

				.analyze-icon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 20rpx;
					top: 22rpx;
				}

				.analyze-title-bottom {
					width: 126rpx;
					height: 15rpx;
					position: absolute;
					left: 65rpx;
					top: 52rpx;
				}

				.order {
					width: 10rpx;
					height: 10rpx;
					background-color: #3a3d4b;
					border-radius: 50%;
					margin-top: 15rpx;
				}

				.text {
					width: 448rpx;
					margin-left: 10rpx;
					color: #3A3D4B;
				}

				.u-collapse-item__content__text.data-v-2675fb21 {
					padding: 0 28rpx 28rpx;
					color: #3A3D4B;
				}

				.showAllIN {
					height: auto;
				}

				.hidetext {

					-webkit-line-clamp: 4;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}

		.delete-popup {
			.u-popup__content.data-v-3a231fda {
				width: 480rpx;
				height: 332rpx;
				border-radius: 20rpx;

				.success-icon {
					display: block;
					width: 128rpx;
					height: 128rpx;
					margin: 48rpx auto 0;
				}

				.success-tips {
					display: block;
					text-align: center;
					margin-top: 10rpx;
				}

				.success-text {
					display: block;
					text-align: center;
					color: #77798D;
					margin-top: 10rpx;
				}

				.u-icon__icon.data-v-2ee87dc9 {
					color: #3d3d3d;
				}
			}
		}
	}


	.item-content {
		display: flex;
		align-items: center;
		margin: 20rpx 0;

		.left-content {
			color: #77798d;
			font-size: 14px;
			width: 100px;
		}

		.right-content {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex: 1;

			.text {
				flex: 1;
				text-align: left;

				max-width: 300rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin: 0rpx 20rpx;
			}
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #3a3d4b;
		}
	}
</style>